<template>
    {{ attrs }}
<el-form :inline="true" :model="formInline" class="demo-form-inline" v-bind="attrs">
    <el-form-item label="Approved by" class="full">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable @blur="handleBlur" />
    </el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs);
type formInline = {
    user: string
    region: string
    date: string
}
const formInline = reactive<formInline>({
  user: '1',
  region: '2',
  date: '3',
})
const handleBlur = () => {
    formInline.user = attrs.name as string
    console.log('blur');
}
</script>

<style scoped lang='less'>  
.full {
    width: 25px;
    // 样式穿透
   :deep(.el-form-item__label) {
        background-color: red;
    }
}
</style>
